<template>
  <div>
    <Menu mode="horizontal" :theme="theme1">
      <MenuItem name="/Index" to="/Index"> 回到主页 </MenuItem>
      <span style="display: block; float: right">
        <Submenu v-if="UserInformation.userId" name="1">
          <template slot="title">
            <Icon type="md-create" />
            帖子管理
          </template>
          <MenuGroup title="帖子管理">
            <MenuItem name="/PostingManage" to="/PostingManage"
              >我的帖子
            </MenuItem>
            <MenuItem name="/PostingEdit" to="/PostingEdit">发表帖子</MenuItem>
          </MenuGroup>
        </Submenu>
        <Submenu v-if="UserInformation.userId" name="2">
          <template slot="title">
            <Icon type="ios-chatboxes" />
            回复管理
          </template>
          <MenuGroup title="回复管理">
            <MenuItem name="/MyReply" to="/MyReply">我的回复</MenuItem>
            <MenuItem name="/OtherReply" to="/OtherReply">他人回复</MenuItem>
          </MenuGroup>
        </Submenu>
        <MenuItem v-if="UserInformation.userId" name="/Favo" to="/Favo"
          >收藏夹管理</MenuItem
        >
        <MenuItem
          v-if="UserInformation.roleId == 2"
          name="/BoardManage"
          to="/BoardManage"
        >
          <Icon type="ios-apps" />
          版块管理
        </MenuItem>

        <Submenu name="3">
          <template slot="title">
            <Avatar :src="UserInformation.headImage" size="large" />
          </template>
          <MenuGroup title="用户管理">
            <MenuItem v-if="UserInformation.userId" name="/user" to="/user"
              >修改资料</MenuItem
            >
            <MenuItem v-else name="/loginAuth" to="/loginAuth">登陆</MenuItem>

            <MenuItem v-if="UserInformation.userId" name="/logout" to="/logout"
              >退出登录</MenuItem
            >
            <MenuItem v-else name="/register" to="/register">注册</MenuItem>
          </MenuGroup>
        </Submenu>
      </span>
    </Menu>
    <!-- <button @click="test">测试</button> -->
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      UserInformation: this.$CommonVar.UserInformation,
      msg: 'Welcome to Your Vue.js App',
      theme1: 'dark'
    }
  },
  methods: {
  }
}
</script>

<style scoped>
</style>
